/** * @description: 学生预警-组件 */
<template>
  <!-- 学生预警 -->
  <div class="pub-floor">
    <div class="title-wrapper">
      <h4>学生预警</h4>
      <span @click="skipDetail('/warningStu')">详情 <van-icon name="arrow" size="14"/></span>
    </div>

    <div class="warn-wrapper">
      <div @click="skipDetail('/warningStu', 1)">
        <h6>心理预警</h6>
        <p>心理异常上报</p>
        <h5>234</h5>
      </div>
      <div @click="skipDetail('/warningStu', 2)">
        <h6>学业预警</h6>
        <p>旷课数</p>
        <h5>578</h5>
      </div>
      <div @click="skipDetail('/warningStu', 0)">
        <h6>行为失范预警</h6>
        <div class="flex">
          <div>
            <p>失范预警</p>
            <h5>578</h5>
          </div>
          <div>
            <p>寝室异常上报</p>
            <h5>578</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StuWarning',
  created() {},
  methods: {
    skipDetail(path, active) {
      this.$emit('skipDetail', path, active)
    },
  },
}
</script>

<style lang="scss" scoped>
.warn-wrapper {
  @include fcb();
  flex-wrap: wrap;
  margin-top: 16px;
  > div {
    width: 170px;
    height: 125px;
    background: url('../../../assets/images/psy_bg.png') no-repeat;
    background-size: 100% 100%;
    padding: 16px 0 16px 16px;
    box-sizing: border-box;
    h6 {
      font-size: $fz16;
    }
    p {
      font-size: $fz14;
      color: #97979f;
      margin-top: 4px;
    }
    h5 {
      font-size: 28px;
      margin-top: 12px;
    }
    .flex {
      @include fh();
      > div + div {
        margin-left: 79.5px;
      }
    }
  }
  > div:nth-child(2) {
    background: url('../../../assets/images/study_bg.png') no-repeat;
    background-size: 100% 100%;
  }
  > div:last-child {
    width: 100%;
    margin-top: 11px;
    background: url('../../../assets/images/deed_bg.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>
